<template>
  <div class="app-container">
    <el-form ref="personForm" :model="person" :rules="rules" label-width="120px">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model.trim="person.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别:">
        <el-select v-model="person.sex" style="width: 100%" placeholder="请选择性别">
          <el-option value="男" label="男"></el-option>
          <el-option value="女" label="女"></el-option>
          <el-option value="未知" label="未知"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄:" prop="age">
        <el-input v-model.number="person.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input v-model.trim="person.address" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="所属实验分室:" prop="labId">
        <el-select v-model="person.labId" style="width: 100%" placeholder="请选择实验分室">
          <el-option v-for="item in labSub" :key="item.id" :label="item.labName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="default" @click="$router.go(-1)">返回</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <el-button type="primary" @click="savePerson">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入api接口定义的js文件
import labSubApi from '@/api/labSub'
import personApi from '@/api/person'
export default {
  data() {
    return {
      // 定义表单绑定对象
      person: {
        name: '',
        sex: '男',
        age: '',
        address: '',
        labId: ''
      },
      labSub: [],
      isEdit: false,
      rules: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
        labId: [
          {
            required: true,
            message: '请选择实验室',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    this.isEdit = !!id

    if (this.isEdit) {
      this.getById(id)
    }

    this.getLabSub()
  },
  methods: {
    // 查询所有分室信息
    getLabSub() {
      labSubApi.getList().then((response) => {
        this.labSub = response.data
      })
    },

    // 根据id获取
    getById(id) {
      personApi.getById(id).then((res) => {
        this.person = res.data
      })
    },

    // 添加
    savePerson() {
      this.$refs['personForm'].validate((valid) => {
        if (valid) {
          const apiCall = this.isEdit ? personApi.update(this.person) : personApi.save(this.person)

          apiCall.then((res) => {
            const message = this.isEdit ? '修改成功' : '添加成功'
            this.$message.success(message)
            this.$router.push({ path: '/person/index' })
          })
        }
      })
    },

    // 重置
    reset() {
      if (this.isEdit) {
        this.getById(this.$route.params.id)
      }

      this.$refs['personForm'].resetFields()
    }
  }
}
</script>

<style></style>
